<script setup>
import router from "../modules/router.js";
import {showImagePreview} from "vant";

let props = defineProps(["item"]);
console.log(props.item);
const showImage = (index) => {
  showImagePreview({
    images: props.item.talkImages,
    startPosition: index
  })
};
const seeDetail = (row) => {
  router.push({
    path: '/detail',
    query: {
      id: props.item.id
    }
  })
}
const toUserPage = () => {
  router.push({
    path: "/userPage",
    query: {
      userHeadimg: props.item.userHeadimg,
      user_id: props.item.talkOwner.user_id,
      location: props.item.talkOwner.location,
      name: props.item.talkOwner.name,
    }
  })
}
const toTag = (val) => {
  router.push({
    path: "/tagPage",
    query: {
      tag: val
    }
  })
}
const openPage = (url) => {
  window.open(url, '_blank')
}
</script>

<template>
  <div class="content-card">
    <van-row>
      <van-col>
        <van-image
            @click="toUserPage"
            style="margin-right: 10px"
            round
            width="40"
            height="40"
            :src="props.item.userHeadimg"
        />
      </van-col>
      <van-col>
        <div style="color: rgb(102, 119, 153); font-size: 18px;height: 20px" @click="toUserPage">{{ props.item.talkOwner?.name }}</div>
        <div style="color: #999999; font-size: 14px;margin-top:5px;">{{ props.item.createTime }}</div>
      </van-col>
    </van-row>
    <div class="contentBox">
      <ellipsis :text="props.item.talkText"></ellipsis>
      <div style="margin-top:5px;">
        <van-image
            v-for="(item, index) in props.item.talkImages"
            @click="showImage(index)"
            :key="index"
            style="margin-right: 10px"
            width="130px"
            height="150px"
            fit="cover"
            :src="item"
        />
        <div style="margin:15px 5px 15px 0px;"  v-for="(item, index) in props.item.talkFiles" :key="index" @click="openPage(item)">
          <div class="inline-flex" v-if="['pdf'].includes(item.split('.').pop())" >
            <img src="../assets/pad.png" alt="" width="30" height="30">
            <div class="ml-2 flex-1 text-gray-500" style="padding-top:2px;color: #107459">
              {{ item.match(/\/([^\/]+)$/)[1] }}
            </div>
          </div>
        </div>
      </div>
      <van-tag v-for="(item, index) in props.item.hashtags" :key="index" plain type="primary" @click="toTag(item)" class="h-tag">
        {{ item }}
      </van-tag>
      <!--        <div style="display: flex; align-items: center; justify-content: end">-->
      <!--          <van-icon name="like-o" />-->
      <!--          <div style="margin-right: 10px">收藏</div>-->
      <!--          <van-icon name="user-o" />-->
      <!--          <div>关注</div>-->
      <!--        </div>-->
      <div>
        <van-icon v-if="props.item.latestLikes.length > 0" name="good-job"/>
        <span style="margin: 5px 10px 5px 0px;" v-for="(item, index) in props.item.latestLikes"
              :key="index">{{ item.owner.name }}</span>
      </div>
      <div>
        <div v-for="(item, index) in props.item.showComments" :key="index">
            <span style="rgb(102, 119, 153)">{{ item.owner.name }}：</span
            >:<text v-html="item.text"></text>
        </div>
        <!--          <div>-->
        <!--            <span style="color: #1989fa">仁然先生</span>：<span>太棒了！</span>-->
        <!--          </div>-->
      </div>
      <div style="color: #c5c6cb;margin-top:-20px;float: right;font-size: 14px;" @click="seeDetail(props)">查看详情 ></div>
    </div>
  </div>
</template>


<style scoped>
.inline-flex {
  display: flex;
  justify-content: space-between;
}
.content-card {
  margin: 10px 5px;
  padding: 10px 10px;
  background: white;
  border-radius: 8px;
}

.van-text-ellipsis__action {
  color: var(--van-text-ellipsis-action-color);
  cursor: pointer;
  margin-left: 10px !important;
}
</style>

<style>
.van-image-preview {
  background: none !important;
}
a {
  color: #107459;
  text-decoration: underline;
}
.h-tag{
  width: auto;
  margin:20px 5px 10px 0px;
  font-size: 14px;
  padding: 3px;
  color:rgb(22, 185, 152) !important;
  font-weight: bold;
}
</style>
